<template>
  <el-dialog 
    :visible.sync="dialogVisible"
    :show-close="false"
    append-to-body
    width="1000px"
    class="eldialog">
    <i class="close-btn el-icon-close" @click="handleClose"></i>
    <h5 class="title zh">
      <p v-html="info['title']"></p>
      <span v-show="info['status']" class="status" :class="{'imp': info['status']==='现行', 'abolish': info['status']==='废止'}">{{info['status']}}</span>
    </h5>
    <h6 class="title en" v-html="info['title_en']"></h6>
    <dl>
      <dd class="xs6">
        <span class="tit">【标准号】</span>
        <span class="cont">{{info['code']}}</span>
      </dd>
      <dd class="xs6">
        <span class="tit">【标准性质】</span>
        <span class="cont">{{info['nature']}}</span>
      </dd>
      <dd class="xs6">
        <span class="tit">【发布日期】</span>
        <span class="cont">{{info['issue_date']}}</span>
      </dd>
      <dd class="xs6">
        <span class="tit">【实施日期】</span>
        <span class="cont">{{info['imp_date']}}</span>
      </dd>
      <dd>
        <span class="tit">【标准类型】</span>
        <span class="cont">{{info['type']}}</span>
      </dd>
      <dd>
        <span class="tit">【起草人】</span>
        <span class="cont">{{info['draftsman']}}</span>
      </dd>
      <dd>
        <span class="tit">【起草单位】</span>
        <span class="cont">{{info['drafting_unit']}}</span>
      </dd>
      <dd class="long130">
        <span class="tit">【技术归口单位】</span>
        <span class="cont">{{info['tech_commitees']}}</span>
      </dd>
      <dd class="long150">
        <span class="tit">【中国标准分类号】</span>
        <span class="cont">{{info['zh_class']}}</span>
      </dd>
      <dd class="long150">
        <span class="tit">【国际标准分类号】</span>
        <span class="cont">{{info['in_class']}}</span>
      </dd>
    </dl>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      info: {}
    }
  },
  methods: {
    init(data) {
      this.$get(this.$Url.IR.standardGetById, {
        id: data.id
      }).then(res => {
        let data = res.data
        let info = JSON.parse(JSON.stringify(data))
        // 起草人
        if (info.draftsman && info.draftsman.length > 0) {
          info.draftsman = info.draftsman.join('，')
        } else {
          info.draftsman = ''
        }
        // 起草单位
        if (info.drafting_unit && info.drafting_unit.length > 0) {
          info.drafting_unit = info.drafting_unit.join('，')
        } else {
          info.drafting_unit = ''
        }
        // 国际标准分类号
        if (info.in_class) {
          if (info.in_class instanceof Array && info.in_class.length > 0) {
            info.in_class = info.in_class.filter(v => v !== '').join('；')
          }
        }
        this.info = info
        this.$nextTick(() => {
          this.dialogVisible = true
        })
      })
    },
    handleClose() {
      this.dialogVisible = false
    },
  },

}
</script>

<style lang="scss" scoped>
.eldialog {
  ::v-deep {
    .el-dialog__header {
      height: 0;
      padding-top: .1rem;
      padding-bottom: .1rem;
      // padding-top: 0;
      // padding-bottom: 0;
      text-align: center;
      background-color: $color79;
    }
    .el-dialog__body {
      padding: 0 .4rem .4rem;
      background-color: $color79;
    }
  }
  .title {
    width: 100%;
    line-height: .24rem;
    padding: .1rem 0;
    border-bottom: 0;
    text-align: center;
    font-size: .18rem;
    &.zh {
      line-height: .3rem;
      p, span {
        display: inline-block;
        margin-right: .1rem;
        vertical-align: middle;
      }
      span {
        height: .16rem;
        line-height: .16rem;
        padding: 0 .06rem;
        border-radius: 6px;
        text-align: center;
        font-size: .12rem;
        color: $color2;
        background-color: $mainColor;
        &.imp {
          background-color: $mainColor;
        }
        &.abolish {
          background-color: $color78;
        }
      }
    }
    &.en {
      font-size: .16rem;
      color: $color80;
    }
  }
  dl {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    dd {
      position: relative;
      display: flex;
      width: 100%;
      line-height: .3rem;
      padding-right: .1rem;
      margin-bottom: .1rem;
      box-sizing: border-box;
      font-size: .16rem;
      color: $color5;
      &.xs6 {
        width: 50%;
      }
      &.long130 {
        .tit {
          width: 1.3rem;
        }
        .cont {
          width: calc(100% - 1.3rem);
        }
      }
      &.long150 {
        .tit {
          width: 1.5rem;
        }
        .cont {
          width: calc(100% - 1.5rem);
        }
      }
      .tit {
        width: 1rem;
        margin-right: .1rem;
      }
      .cont {
        width: calc(100% - 1rem);
      }
    }
  }
}
.close-btn {
  position: absolute;
  top: .2rem;
  right: .2rem;
  z-index: 2;
  display: block;
  width: .3rem;
  height: .3rem;
  line-height: .4rem;
  text-align: center;
  font-size: .18rem;
  color: $color92;
  cursor: pointer;
}
</style>